<template>
  <div class="home pb-6">
    <!-- 背景色 -->
    <div
      class="top-bg absolute h-20 -z-10 w-screen bg-gradient-to-b from-emerald-500 to-white overflow-hidden"
    ></div>
    <!-- 搜索框 -->
    <div class="pt-5">
      <van-search
        v-model="searchField"
        placeholder="请输入搜索关键词"
        show-action
        shape="round"
        background="transparent"
      >
        <template #action>
          <div class="text-white flex align-center">
            <van-icon name="shopping-cart-o" size="0.8rem" />
          </div>
        </template>
      </van-search>
    </div>
    <!-- 主体部分 -->
    <main
      class="flex flex-col space-y-2 [&_h2.title]:font-bold [&_h2.title]:mb-2 [&_h2.title]:ml-4"
    >
      <!-- 分类 -->
      <header
        class="w-[calc(100vw-0.6rem)] bg-white rounded-2xl p-2 mt-1 shadow-md self-center"
      >
        <section class="topbar flex justify-around mb-1">
          <div
            class="topbar-item flex flex-col items-center"
            v-for="item in topBarState"
            :key="item.title"
          >
            <div class="topbar-item__icon">
              <van-icon :name="item.icon" size="0.9rem" />
            </div>
            <div class="topbar-item__text text-[0.3rem]">{{ item.title }}</div>
          </div>
        </section>
        <van-button
          type="primary"
          block
          size="small"
          class="[&.van-button]:rounded-xl"
          color="rgb(246,247,248)"
        >
          <div class="text-black flex items-center">
            <van-icon name="apps-o" size="0.7rem" />
            <span class="text-[0.5rem] ml-2 font-bold">所有分类</span>
          </div>
        </van-button>
      </header>
      <!-- 导航栏 -->
      <section class="navbar flex overflow-x-scroll w-screen space-x-2 px-2">
        <div
          class="navbar-item flex flex-col border border-solid border-inherit rounded-lg flex-[0_0_auto] w-12"
          v-for="item in navBarState"
          :key="item.title"
        >
          <div class="navbar-item__text text-[0.4rem] p-1 pb-0">
            {{ item.title }}
          </div>
          <div class="navbar-item__icon self-end p-1">
            <van-icon :name="item.icon" size="0.8rem" />
          </div>
        </div>
      </section>
      <!-- 最近浏览 -->
      <section>
        <h2 class="title text-[0.5rem]">最近浏览</h2>
        <RecentlyViewCard :items="recentlyViewedState" />
      </section>
      <!-- 想去哪里玩 -->
      <section>
        <h2 class="title text-[0.5rem]">想去哪里玩？</h2>
        <div class="flex w-screen overflow-x-scroll space-x-1 px-2">
          <div
            class="region-item flex-[0_0_auto]"
            v-for="item in discountInfo"
            :key="item.region"
          >
            <div
              class="item-wrapper w-16 h-10 rounded-lg overflow-hidden relative"
            >
              <img :src="item.discounts[0].cover" alt="" />
              <div
                class="item-mask absolute w-full h-full bg-black opacity-20 bottom-0"
              ></div>
              <div
                class="item-title absolute z-10 text-[0.4rem] font-bold text-white bottom-1 left-1"
              >
                {{ item.region }}
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 探索更多 -->
      <section>
        <h2 class="title text-[0.5rem]">探索更多</h2>
        <PromotionalList :items="promotionalList" :next="handleNextPage" />
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, onMounted } from "vue";
import { useHomeStore } from "@/stores/homeStore";
import { usePromotionalStore } from "@/stores/promotionalStore";
import RecentlyViewCard from "@/components/RecentlyView/RecentlyViewCard.vue";
import { useDiscountStore } from "@/stores/discountStore";
import PromotionalList from "@/components/Promotional/PromotionalList.vue";

const searchField = ref("");
const homeStore = useHomeStore();
const discountStore = useDiscountStore();
const promotionalStore = usePromotionalStore();

const currentPage = ref(1);

onMounted(async () => {
  await promotionalStore.getPromotionalList(1, 6);
});

const handleNextPage = async (setHasMore: (value: boolean) => void) => {
  currentPage.value++;
  const res = await promotionalStore.getPromotionalList(currentPage.value, 6);
  if (!res.hasMore) {
    setHasMore(false);
  }
};

const { topBarState, navBarState, recentlyViewedState } = toRefs(homeStore);
const { discountInfo } = toRefs(discountStore);
const { promotionalList } = toRefs(promotionalStore);
</script>

<style scoped></style>
